import { View } from "@tarojs/components";
import { ReactNode } from "react";

type PageProps = {
  skyline?: boolean;
  mode?: "fixed" | "sticky";
  bgcolor?: string;
  hiddenHeaderBg?: boolean;

  footerStyle?: boolean;
  footerSticky?: boolean;

  height?: string;

  children?: ReactNode;
  slotHeader?: ReactNode;
  slotFooter?: ReactNode;
};

export default ({
  skyline,
  mode = "sticky",
  footerSticky,
  bgcolor,

  footerStyle = true,
  slotHeader,
  slotFooter,
  children,
}: PageProps) => {
  return (
    <View
      className={`page-container flex flex-col ${
        skyline ? "h-screen" : "min-h-screen "
      }`}
      style={{ background: bgcolor }}
    >
      <View
        className={`page-header flex-none sticky w-full top-0 z-20 overflow-hidden ${
          mode == "sticky" ? "sticky" : mode == "fixed" ? "fixed" : ""
        }`}
        style="overflow-y: overlay"
      >
        {slotHeader}
      </View>

      <View
        className={`flex-auto relative z-10 flex flex-col ${
          skyline && "overflow-hidden"
        }`}
      >
        {children}
      </View>

      <View className={`flex-none ${footerSticky && "sticky z-10 bottom-0"}`}>
        <View className={footerStyle ? "p-3 bg-page" : ""}>
          {slotFooter}

          {footerStyle && <View className="safe-footer" />}
        </View>
      </View>
    </View>
  );
};
